import {AtIcon} from "taro-ui";
import {View, Button, Image} from '@tarojs/components';
import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import {TARO_ENV} from "../../../../constants/api";
import './detail-bar.scss';

const OtherBar: React.FC = () => {

  const [show, setShow] = useState(false);

  const share = () => {
    if (TARO_ENV === 'h5') {
      setShow(!show)
    }
  }

  return (
    <View className='detailBar'>
      <View className='service-box'>
        <View className='service-item goto-home' onClick={() => {
          Taro.switchTab({url: '/pages/index/index'})
        }}
        >
          <View className='home'><AtIcon value='icon icon-shouye-01' size='20' color='#000' /></View>
          <View className='text'>首页</View>
        </View>
        <View className='service-item goto-service' onClick={() => {
          Taro.navigateTo({url: `/distributor/contact/contact`})
        }}
        >
          <View className='kefu'><AtIcon value='icon icon-kefu-01' size='20' color='#000' /></View>
          <View className='text'>客服</View>
        </View>
      </View>
      <View className='btn-box btn-box-right'>
        <View
          className='capsules'
        >
          <View
            className='share no-radius'
            onClick={share}
          >
            <Button className='button' openType='share'>分享</Button>
          </View>
        </View>
      </View>
      {show && <View className='H5shareBox' onClick={share}>
        <Image className='H5shareImg' src='https://resource.ivcheng.com/resources/images/H5sharebj.png'
          mode='widthFix'
        />
        <View className='H5shareBtn'>我知道了</View>
      </View>
      }
    </View>
  )
}

export default OtherBar
